import { createStore } from 'vuex'
import { login_func, logout_func } from '@/api/manager'
import { getUserInfo_func } from '@/api/manager'
import { setToken, removeToken } from '@/composables/auth'


const store = createStore({
    state() {
        return {
            // 管理用户信息
            user: {},
            // 侧边宽度
            asideWidth: '250px'
        }
    },
    mutations: {
        // 记录用户信息，主要是修改
        SET_USERINFO(state, user) {
            state.user = user
        },
        // 展开或缩起侧边栏
        handleAsideWidth(state) {
            state.asideWidth = state.asideWidth === '250px' ? '64px' : '250px'
        }
    },
    actions: {
        // 登录
        login(context, { username, password }) {
            return new Promise((resolve, reject) => {
                login_func(username, password).then(res => {
                    setToken(res.token)
                    context.commit('SET_USERINFO', res)
                    resolve(res)
                }).catch(err => reject(err))
            })
        },

        // context 对象通常包含以下几个主要属性：
        // 1. commit: 用于提交 mutations 的方法。
        // 2. dispatch: 用于分发其他 actions 的方法。
        // 3. state: 当前的 Vuex 状态树。
        // 4. getters: 用于访问 getters 的方法。
        // 获取当前登录用户信息
        getInfo(context) {
            return new Promise((resolve, reject) => {
                getUserInfo_func().then(res => {
                    console.log('===>>>>>', res);
                    // 提交用户的相关信息
                    context.commit('SET_USERINFO', res)
                    // 请求成功调用这个
                    resolve(res)
                }).catch(err =>
                    reject(err)
                )
            })

        },
        // 退出登录
        logout(context) {
            //清除token
            removeToken()
            context.commit("SET_USERINFO", {})
        }

    }
})
export default store